<template>
  <view class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50" v-if="visible">
    <view class="bg-white rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-auto transform transition-all duration-300 scale-100 opacity-100" 
          :class="{ 'scale-95 opacity-0 pointer-events-none': !visible }">
      <!-- 弹窗头部 -->
      <view class="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50 rounded-t-xl">
        <h3 class="text-lg font-semibold text-gray-800 flex items-center">
          <i class="fa fa-info-circle text-blue-500 mr-2"></i>
          {{ currentProject.name || '项目详情' }}
        </h3>
        <button class="text-gray-500 hover:text-gray-700 focus:outline-none transition-colors" @click="close">
          <i class="fa fa-times text-xl"></i>
        </button>
      </view>
      
      <!-- 弹窗内容 -->
      <view class="p-6 space-y-6">
        <!-- 项目名称 -->
        <view class="relative">
          <view class="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-6 bg-blue-500 rounded-full"></view>
          <h2 class="text-xl font-bold text-gray-900 ml-4">{{ currentProject.name || '未命名项目' }}</h2>
        </view>
        
        <!-- 项目介绍 -->
        <view class="bg-gray-50 p-4 rounded-lg border border-gray-100">
          <h3 class="text-lg font-medium text-gray-800 mb-3 flex items-center">
            <i class="fa fa-file-text-o text-blue-500 mr-2"></i>
            项目介绍
          </h3>
          <p class="text-gray-600 leading-relaxed" v-html="currentProject.description || '暂无介绍内容'"></p>
        </view>
        
        <!-- 项目成员 -->
        <view>
          <h3 class="text-lg font-medium text-gray-800 mb-4 flex items-center">
            <i class="fa fa-users text-blue-500 mr-2"></i>
            项目成员
          </h3>
          <view class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
            <view class="flex items-center space-x-3 p-4 bg-gray-50 rounded-lg border border-gray-100 hover:border-blue-200 transition-all duration-200" 
                  v-for="(member, index) in currentProject.members || []" :key="index">
              <view class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 flex-shrink-0">
                <i class="fa fa-user text-xl"></i>
              </view>
              <view class="overflow-hidden">
                <p class="font-medium text-gray-900 truncate">{{ member.name || '未命名成员' }}</p>
                <p class="text-sm text-gray-500 truncate">{{ member.role || '成员' }}</p>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 弹窗底部 -->
      <view class="px-6 py-4 border-t border-gray-100 flex justify-between bg-gray-50 rounded-b-xl">
        <button 
          class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors flex items-center"
          @click="prevProject"
          :disabled="!hasPrev"
          :class="{ 'opacity-50 cursor-not-allowed': !hasPrev }"
        >
          <i class="fa fa-arrow-left mr-1"></i> 上一个
        </button>
        <button 
          class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors flex items-center"
          @click="nextProject"
          :disabled="!hasNext"
          :class="{ 'opacity-50 cursor-not-allowed': !hasNext }"
        >
          下一个 <i class="fa fa-arrow-right ml-1"></i>
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'VoteProjectDetail',
  props: {
    // 项目列表数据
    projects: {
      type: Array,
      default: () => []
    },
    // 当前显示的项目索引
    currentIndex: {
      type: Number,
      default: 0
    },
    // 弹窗是否可见
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      internalIndex: this.currentIndex,
    }
  },
  computed: {
    // 当前项目数据
    currentProject() {
      return this.projects[this.internalIndex] || {};
    },
    // 是否有上一个项目
    hasPrev() {
      return this.internalIndex > 0;
    },
    // 是否有下一个项目
    hasNext() {
      return this.internalIndex < this.projects.length - 1;
    }
  },
  watch: {
    // 监听外部传入的currentIndex变化
    currentIndex(newVal) {
      this.internalIndex = newVal;
    },
    // 监听visible变化
    visible(newVal) {
      if (!newVal) {
        // 关闭弹窗时重置索引为初始值
        this.internalIndex = this.currentIndex;
      }
    }
  },
  methods: {
    // 切换到上一个项目
    prevProject() {
      if (this.hasPrev) {
        this.internalIndex--;
        this.$emit('update:currentIndex', this.internalIndex);
      }
    },
    // 切换到下一个项目
    nextProject() {
      if (this.hasNext) {
        this.internalIndex++;
        this.$emit('update:currentIndex', this.internalIndex);
      }
    },
    // 关闭弹窗
    close() {
      this.$emit('update:visible', false);
    }
  }
}
</script>

<style scoped>
/* 自定义样式 */
.primary-100 {
  background-color: #dbeafe;
}
.primary-600 {
  color: #2563eb;
}
</style>  